<template>
	<div class="group-list maxW">
		<template v-if="!isMulti || (isMulti && isSchool)">
			<singleCascader class="cascader-list" @resChosed="resChosed"></singleCascader>
			<div class="i_group_checkbox clear">
				<el-checkbox v-model="radioVal" false-label="null" true-label="true" name="state">我创建的</el-checkbox>
				<el-checkbox v-model="radioVal" false-label="null" true-label="false" name="state">我加入的</el-checkbox>
			</div>
		</template>
		<!-- 多级 -->
		<template v-else>
			<el-radio-group class="multi-radio" v-model="radioVal">
				<el-radio :label="null">全部圈组</el-radio>
				<el-radio :label="false">我加入的</el-radio>
				<el-radio :label="true">我创建的</el-radio>
			</el-radio-group>
		</template>

		<div class="i_groupBox">
			<ul>
				<li class="i_groupLs box" v-for="(item, index) of groupListData" :key="index">
					<div class="i_groupLs_img">
						<router-link :to="{ path: '/group/introduct', query: { id: item.id } }" :title="item.name">
							<img :src="BASE_URL + item.picture" :onerror="errorImg" />
						</router-link>
					</div>
					<div class="i_groupLs_if">
						<router-link :to="{ path: '/group/introduct', query: { id: item.id } }" :title="item.name">{{ item.name }}</router-link>
						<div :class="isSchool?'info-row':'info-row info-row2'">
							<div class="creater-info">
								<img :src="BASE_URL + item.create_picture" />
								<span :title="item.create_name">{{ item.create_name }}</span>
							</div>
						
							<template v-if="item.subject_name">
								<div class="section-info" :title="item.grade_name + item.subject_name">
									<span>{{ item.grade_name }}</span>
									<i>/</i>
									<span>{{ item.subject_name }}</span>
								</div>	
							</template>

							<template v-else>
								<div class="section-info" :title="'成员：' + item.u_count">
									<span>成员</span>
									<i>：</i>
									<span>{{ item.u_count }}</span>
								</div>
							</template>
						</div>
					</div>
				</li>
			</ul>
			<div class="pageBox">
				<el-pagination v-if="total_number > page_size" @current-change="change_page" :page-size="page_size" :current-page="page_index"
				 layout="total,prev, pager, next,jumper" :total="total_number"></el-pagination>
			</div>
		</div>
		<div class="dependent" v-if="placeholder">
			<i class="ipng image_state01"></i>
			<p>还没发现任何相关的圈组哦~</p>
		</div>
	</div>
</template>

<script>
	import singleCascader from "@/components/common/single-cascader";

	export default {
		components: {
			singleCascader
		},
		data() {
			return {
				page_index: 1,
				page_size: 8,
				total_number: 0,
				placeholder: false,
				study_section_id: null,
				grade_id: null,
				subject_id: null,
				orderby: 'time',
				create_id: 0,
				gu_status: null,
				radioVal: null,
				sectionData: [],
				gradeData: [],
				subjectList: [],
				errorImg: 'this.src="' + require('../../../../public/images/image_loding.png') + '"',
				checked: false,
				subjectChecked: 0,
				gradeChecked: 0,
				sectionChecked: 0,
				groupListData: []
			};
		},
		created() {
			this.getGroupList();
		},
		watch: {
			// 圈组列表筛选条件
			radioVal: {
				handler(newVal, oldVal) {
					let flag = newVal + ''; //此处兼容单级checkobx的值和多级radio选中的值类型不一样
					let id = this.$store.getters.userInfo.id;
					this.gu_status = flag === 'false' ? 1 : null;
					this.user_id = flag === 'false' ? id : null;
					this.create_id = flag === 'false' ? null : flag === 'true' ? id : 0;
					console.log(this.gu_status, this.user_id, this.create_id);
					this.getGroupList();
				},
				deep: true
			}
		},
		computed: {
			isSchool() {
				return this.$store.getters.isSchool;
			},
			isMulti() {
				return this.$store.getters.isMulti;
			}
		},
		methods: {
			getGroupList() {
				let success = res => {
					let data = res.data;
					this.groupListData = data.data;
					this.total_number = parseInt(data.data_sum);
					this.page_index = parseInt(data.page_index);
					this.placeholder = this.groupListData.length === 0 ? true : false;
				};
				this.$ajax({
					url: '/api/group/group_list',
					method: 'get',
					params: {
						order_type: this.orderby,
						page: this.page_index,
						length: this.page_size,
						study_section_id: this.study_section_id,
						gradeid: this.grade_id,
						subjectid: this.subject_id,
						flag: 'home',
						gu_status: this.gu_status,
						user_id: this.user_id,
						create_id: this.create_id,
						status: 1
					},
					func: {
						success: success
					}
				});
			},
			resChosed(obj) {
				console.log(obj, "选择")
				this.study_section_id = obj.study_section_id;
				this.grade_id = obj.grade_id;
				this.subject_id = obj.subject_id;
				this.page_index = 1;
				this.getGroupList();
			},
			change_page(val) {
				this.page_index = val;
				this.getGroupList();
			}
		}
	};
</script>
<style lang="scss">
	.cascader-list{
		padding: 20px 20px 13px 20px;
		background-color: #fff;
		margin-bottom: 20px;
		box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
	}
	.group-list {
		.single-selection {
			margin-top: 0;
		}

		.multi-radio {
			display: block;
			padding-left: 20px;
			border-radius: 2px;
			background-color: #fff;
			box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);

			.el-radio {
				height: 50px;
				line-height: 50px;
			}

			.el-radio__input {
				display: none;
			}
		}

		.info-row {
			padding-top: 20px;
			font-size: 12px;
			color: #888;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.section-info,
			.creater-info {
				display: inline-block;
				width: 50%;
			}

			.section-info {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				text-align: right;
			}

			.creater-info {
				img {
					display: inline-block;
					width: 20px;
					height: 20px;
					border-radius: 50%;
					margin-right: 8px;
				}

				span {
					display: inline-block;
					max-width: 68px;
					line-height: 20px;
					white-space: nowrap;
					text-overflow: clip;
					overflow: hidden;
				}
			}

		}
	}
</style>
